<template>
  <div>
    <MyNav></MyNav>
    <div class="container mx-auto px-4 mt-10">
      <div class="flex justify-between items-center gap-4">
        <div class="h-69vh w-13vw p-5" style="border: 2px solid #ccc">
          <div
            :class="{ active: activeTab === 'order' }"
            @click="activeTab = 'order'">
            我的订单
          </div>
          <div
            class="mt-2 mb-2"
            :class="{ active: activeTab === 'coupon' }"
            @click="activeTab = 'coupon'">
            我的优惠券
          </div>
          <div
            :class="{ active: activeTab === 'point' }"
            @click="activeTab = 'point'">
            我的积分
          </div>
        </div>
        <div class="h-69vh w-73vw" style="border: 2px solid #ccc">
          <div v-if="activeTab === 'order'">
            <div class="w-100% table-box">
              <div>我的订单</div>
              <table border="1" cellpadding="10" cellspacing="0">
                <thead>
                  <tr>
                    <th>订单号</th>
                    <th>商品标题</th>
                    <th>订单总金额</th>
                    <th>订单状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <a href="#">订单号2024092974421</a><br />
                      下单时间:2024-09-29 09:00:51
                    </td>
                    <td><a href="#">鸿蒙应用开发项目实战</a></td>
                    <td>¥0.01元</td>
                    <td>已确认,已付款</td>
                    <td><a href="#">下载地址</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div v-if="activeTab === 'coupon'">
            <div class="w-100% table-box">
              <div>我的优惠券</div>
              <table border="1" cellpadding="10" cellspacing="0"></table>
            </div>
          </div>
          <div v-if="activeTab === 'point'">
            <div class="w-100% table-box">
              <div>我的积分</div>
              <table border="1" cellpadding="10" cellspacing="0"></table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const activeTab = ref("order");
</script>

<style lang="scss" scoped>
.active {
  color: #ff8a3c;
}
.table-box {
  //   阴影
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
/* 表格整体样式 */
table {
  width: 95%;
  margin: 20px auto;
  border-collapse: collapse;
  /* 合并边框 */
  font-family: "Microsoft Yahei", sans-serif;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* 添加阴影，增加层次感 */
}

/* 表头样式 */
th {
  background-color: #f2f2f2;
  color: #333;
  padding: 12px 15px;
  text-align: center;
  border: 1px solid #ddd;
  font-weight: bold;
}

/* 单元格样式 */
td {
  padding: 10px 15px;
  text-align: center;
  border: 1px solid #ddd;
  color: #555;
}
</style>
